<template>
	<div class="page page-stadium-detail has-headbar">
		<head-bar
			:title="$route.meta.title"
			:prevRoute="{name: 'home'}"
			right-text="写心声"
			:rightRoute="{name: 'voice-form'}"
		/>
    <van-list class="list"
        v-model="moreLoading"
        :finished="moreFinished"
        @load="onLoad">
      <ul class="user-page">
        <template v-for="item in list">
          <router-link :key="item.id" tag="li" :to="{name: 'voice-detail', params: {id: item.citizenCommentId}}">
            <div class="info">
              <div class="head">
                <h3>{{item.discussantName}}</h3>
                <div class="status">
                  <van-button class="state" :class="{no: item.status === 0}" round size="mini">{{item.status === 0 ? '未回复':'已回复'}}</van-button>
                </div>
              </div>
              <div class="body">
                <div class="html-content" v-html="item.content"></div>
              </div>
            </div>
          </router-link>
        </template>
        <empty-data v-if="list.length === 0"></empty-data>
      </ul>
    </van-list>
	</div>
</template>

<script>
import { API_CITIZEN_COMMENTS } from '@/service/voice'
export default {
  name: 'voice-list',
  data () {
    return {
      list: [],
      moreLoading: false,
      moreFinished: false,
      pageNumber: 0,
      pageSize: 8
    }
  },
  mounted () {
    // this.requestList()
  },
  methods: {
    requestList () {
      let reqData = {
        pageNumber: this.pageNumber + 1,
        pageSize: this.pageSize
      }
      API_CITIZEN_COMMENTS(reqData).then((resData) => {
        let { resultList, totalSize } = resData.list
        if (resultList.length <= 0) {
          this.moreFinished = true
        } else {
          this.pageNumber = this.pageNumber + 1
          this.list = [...this.list, ...resultList]
          if (totalSize === this.list.length) {
            this.moreFinished = true
          }
        }
      }).catch(() => {
        this.moreFinished = true
      }).finally(() => {
        this.moreLoading = false
      })
    },
    onLoad () {
      this.requestList()
    }
  }
}
</script>

<style lang="less" scoped>
	@import './../../assets/styles/user.less';
	.info{flex:1;}
  @import "../../assets/styles/htmlcontent.less";
</style>
